<template>
	<view class="u-page u-bg-white flex flex-direction">
		<zx-nav title="问题反馈" bg="#fff" fixedTop></zx-nav>
		<view class="main flex-sub">
			<view class="goodsinfo">
				<view class="title">请输入您要反馈的相关建议</view>
				<view class="mt50"><textarea class="w100" placeholder="对我们的商品、服务，进行评价……" v-model="feedInfo.info"></textarea></view>
				<view class="uploadImg mt40"><tui-upload @complete="complete"></tui-upload></view>
				<view class="flex align-center mt60">
					<view class="title">联系方式</view>
					<input class="flex-sub phone" type="number" v-model="feedInfo.contact" />
				</view>
			</view>
		</view>
		<view class="btnBar"><u-button @click="sumbit" type="success" shape="circle" :loading="btnLoading">提交</u-button></view>
	</view>
</template>

<script>
import tuiUpload from '@/components/tui-upload/tui-upload.vue';
export default {
	data() {
		return {
			tabIndex: 1,
			type: 0,
			index: 4,
			img_url: [],
			feedInfo: {
				info: undefined,
				contact: undefined,
				img_url: []
			} //留言信息
		};
	},
	components: {
		tuiUpload
	},
	methods: {
		//图片选择完成
		complete(item) {
			this.feedInfo.img_url = [...item.imgArr];
			this.img_url = [...item.imgArr];
		},
		//提交
		sumbit() {
			for (var key in this.feedInfo) {
				if (key === 'info' && !this.feedInfo[key]) {
					uni.showToast({
						title: '请填写意见内容',
						icon: 'none'
					});
					return false;
				}
				if (key == 'contact' && !uni.$u.test.mobile(this.feedInfo[key])) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					});
					return false;
				}
			}
			console.log(JSON.stringify(this.feedInfo));
			this.$postAction(this.$api.feedback, this.feedInfo).then(da => {
				uni.showToast({
					title: da.msg,
					icon: 'none'
				});
				if (da.code == 0) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.goodsinfo {
	color: #000;
	textarea,
	input {
		padding: 40upx 30upx;
		border: 1px solid #e5e5ea;
		border-radius: 12upx;
		height: 200upx;
		font-size: 26upx;
	}

	input {
		padding: 0 20upx;
		line-height: 65upx;
		height: 65upx;
		margin-left: 30upx;
	}

	.uploadImg {
		margin-top: 24upx;
	}

	.title {
		color: #000;
		font-size: 26upx;
	}
}

.main {
	overflow: auto;
	margin-top: 20upx;
}
.btnBar {
	margin: 24upx 94upx;
}
</style>
